import { BlockNoteView } from "@blocknote/mantine";
import { useCreateBlockNote } from "@blocknote/react";
import { main } from "@model";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";
import { blockSchema } from "../blockNoteCustom/schema";
import { Flex } from "antd";

export default function EditorArea(props: {
  note: main.Note,
  readModel: boolean,
}) {

  const formateDate = (dataStr: string) => {
    const date = new Date(dataStr)

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth返回的月份是从0开始的
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

  return <>
    <Flex justify='flex-end'>
      {formateDate(props.note.createTime)}
    </Flex>
    {props.readModel ? <ReadEditor note={props.note} /> : <BriefEditor note={props.note} />}
  </>
}

const BriefEditor = (props: {
  note: main.Note,
}) => {
  const content = (JSON.parse(props.note.content) as []).slice(0, 10)
  const editor = useCreateBlockNote({
    schema: blockSchema,
    initialContent: content,
  })

  return <BlockNoteView editor={editor} editable={false} />
}

const ReadEditor = (props: {
  note: main.Note,
}) => {
  const content = JSON.parse(props.note.content) as []
  const editor = useCreateBlockNote({
    schema: blockSchema,
    initialContent: content,
  })

  return <BlockNoteView editor={editor} editable={false} />
}
